<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>最美的逆行者</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="shortcut icon" type="text/css" href="img/logo1.ico" />
	</head>
	<body>
		<div class="videobox">
			<header>
				<div class="con">
					<section class="left">
						<span id="current-time"></span>
					</section>
					<section class="right">
						<!-- <a href="#">登录</a>
		 				<a href="#">注册</a> -->
					</section>
				</div>
			</header>
			<nav>
				<span>
					<a href="#">
						<img src="img/logo1.jpg" alt="logo">
					</a>
				</span>

				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="COVID-19介绍.html">COVID-19介绍</a></li>
					<li><a href="抗疫先锋.html">抗疫先锋</a></li>
					<li><a href="政策法规.html">政策法规</a></li>
					<li><a href="防控指南.html">防护指南</a></li>
				</ul>

			</nav>
			<div class="box1">
				<h1>致敬</h1>
				<h2>每一个为疫情</h2>
				<h2>做出贡献的人</h2>
			</div>
			<div class="box9">
				<div class="slider-wrapper">
					<img src="img/轮播照片1.jpg">
					<img src="img/轮播照片2.jpg">
					<img src="img/轮播照片3.jpg">
					<img src="img/轮播照片4.jpg">
					<img src="img/轮播照片5.jpg">
				</div>
				<div class="slider-indicators"></div>
			</div>

			<script>
				setInterval(function() {
					var today = new Date();
					var options = {
						year: 'numeric',
						month: 'numeric',
						day: 'numeric',
						weekday: 'short',
						hour: 'numeric',
						minute: 'numeric',
						second: 'numeric',
						hour12: false
					};
					var dateTimeString = today.toLocaleTimeString('zh-CN', options);
					document.getElementById("current-time").innerHTML = dateTimeString;
				}, 1000);

			 var slideIndex = 0;

				// 显示幻灯片和指示器
				function showSlides() {
					var i;
					var slides = document.getElementsByClassName("slider-wrapper")[0].getElementsByTagName("img");
					var indicators = document.getElementsByClassName("slider-indicator");
					for (i = 0; i < slides.length; i++) {
						slides[i].style.display = "none";
						indicators[i].classList.remove("active");
					}

					slideIndex++;

					if (slideIndex > slides.length) {
						slideIndex = 1
					}

					slides[slideIndex - 1].style.display = "block";
					indicators[slideIndex - 1].classList.add("active");

			 	setTimeout(showSlides, 3000);
				}

				// 创建指示器
				function createIndicators() {
					var i;
					var wrapper = document.getElementsByClassName("slider-wrapper")[0];
					var indicatorsContainer = document.getElementsByClassName("slider-indicators")[0];
					for (i = 0; i < wrapper.children.length; i++) {
						var indicator = document.createElement("span");
						indicator.classList.add("slider-indicator");
						if (i === 0) {
							indicator.classList.add("active");
						}
						indicatorsContainer.appendChild(indicator);
					}
				}

				createIndicators();
				showSlides();
			</script>
	</body>
</html>
